<template>
  <div class="title">
    <van-icon
      class="title_return"
      v-if="icongtf"
      name="arrow-left"
      @click="routesta"
    />
    <span class="title_text">{{ istext }}</span>
    <span v-if="isrighttexttf" class="title_ation" @click="rightroute">
      {{ isrighttext }}
    </span>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { defineProps, ref, watch } from "vue";
let props = defineProps({
  isicong: {
    //是否需要返回icon图标
    default: true,
    type: Boolean,
    required: false,
  },
  istext: {
    //本页面标题
    default: "",
    type: String,
    required: false,
  },
  isroute: {
    //返回图标返回路径
    default: "",
    type: String,
    required: false,
  },
  isroutedata: {
    // 返回时数据
    default: {},
    type: Object,
    required: false,
  },
  isrighttext: {
    // 右侧文案
    default: "",
    type: String,
    required: false,
  },
  isrightroute: {
    // 右侧跳转路径
    default: "",
    type: String,
    required: false,
  },
  rightroutedata: {
    // 跳转时数据
    default: {},
    type: Object,
    required: false,
  },
  isrighttexttf: {
    // 右边文字显示
    default: true,
    type: Boolean,
    required: false,
  },
});
const icongtf = ref<boolean>(props.isicong);
const texttf = ref<boolean>(props.istext);
const routetf = ref<string>(props.isroute);
const routedata = ref<object>(props.isroutedata);
const isrighttext = ref<string>(props.isrighttext);
const isrightroute = ref<string>(props.isrightroute);
const rightroutedata = ref<object>(props.rightroutedata);
const isrighttexttf = ref<boolean>(props.isrighttexttf);
watch(
  () => props.isroutedata,
  (val: object) => {
    routedata.value = val;
  }
);
const routesta = () => {
  router.push({
    path: routetf.value,
    query: {
      routedata: JSON.stringify(routedata.value),
    },
  });
};
watch(
  () => props.rightroutedata,
  (val: object) => {
    rightroutedata.value = val;
  }
);
watch(
  () => props.isrighttexttf,
  (val: boolean) => {
    isrighttexttf.value = val;
  }
);
const rightroute = () => {
  router.push({
    path: isrightroute.value,
    query: {
      routedata: JSON.stringify(rightroutedata.value),
    },
  });
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.title {
  width: 100%;
  background-color: #247af1;
  color: #ffffff;
  font-weight: bold;
  font-size: 36px;
  margin: 0;
  display: flex;
  min-height: 36px;
  height: 88px;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99999999;
}
.title_text {
  position: absolute;
  margin: auto auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 88px;
  height: 88px;
  margin: 0;
  padding: 0;
}
.title_ation {
  position: absolute;
  margin: auto auto;
  top: 0;
  bottom: 0;
  right: 30px;
  line-height: 88px;
  height: 44px;
  margin: 0;
  padding: 0;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.title_return {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translate(0%, -50%);
  font-size: 40px;
  z-index: 9999;
}
</style>
